﻿@page "/docs/components/time-picker"

<Seo Canonical="/docs/components/time-picker" Title="Blazorise TimePicker Component" Description="Learn to use and work with the Blazorise TimePicker component, which is a fully featured time selection component that lets users select a time." />

<DocsPageTitle Path="Components/Time Picker">
    Blazorise TimePicker component
</DocsPageTitle>

<DocsPageLead>
    A customizable time input component with an option to manually write time or choose from a menu.
</DocsPageLead>

<DocsPageParagraph>
    The <Code Tag>TimePicker</Code> is stand-alone component that can be utilized in many existing Blazorise components. It offers the user a visual representation for selecting the time.
</DocsPageParagraph>

<DocsPageParagraph>
    <Code>TimePicker</Code> is based on a <Blazorise.Link To="https://flatpickr.js.org/">flatpickr</Blazorise.Link> time picker
    and as such is not a native time input element. That means that unlike <Code>TimeEdit</Code> which will render <Code>type="time"</Code>,
    <Code>TimePicker</Code> will render <Code>type="text"</Code> in the DOM.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic example">
        In the following example, the Blazorise TimePicker is easily set up and bound to a value by setting the <Code>@@bind-</Code> directive.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicTimePickerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicTimePickerExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="DateTime example">
        In the following example, the Blazorise TimePicker component is easily configured to bind with a <Code>DateTime?</Code> type, demonstrating its versatility.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TimePickerWithDateTimeExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TimePickerWithDateTimeExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Add icon">
        To add icon you can combine <Code>TimePicker</Code> with an <Code>Addon</Code>.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TimePickerWithIconExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TimePickerWithIconExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Inline Time">
        To always show the time menu you just need to set <Code>Inline</Code> parameter.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <InlineTimePickerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="InlineTimePickerExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Non Static example">
        <Paragraph>
            By default, the time menu will position statically. This means that it will also keep its position relative to the page when you scroll.
        </Paragraph>
        <Paragraph>
            If you want to disable this behavior, you should assign the value false to the <Code>StaticPicker</Code> parameter.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TimePickerNonStaticExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TimePickerNonStaticExample" />
</DocsPageSection>

<DocsPageSubtitle>
    API
</DocsPageSubtitle>

<Heading Size="HeadingSize.Is3">
    Attributes
</Heading>

<DocsAttributes>
    <DocsAttributesItem Name="Time" Type="TValue" Default="default">
        Gets or sets the input time value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TimeChanged" Type="@("EventCallback<TValue>")">
        Occurs when the time has changed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Min" Type="TimeSpan?" Default="null">
        The earliest time to accept.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Max" Type="TimeSpan?" Default="null">
        The latest time to accept.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Pattern" Type="string" Default="null">
        The pattern attribute specifies a regular expression that the input element’s value is checked against on form submission.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Placeholder" Type="string" Default="null">
        Sets the placeholder for the empty time.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DisplayFormat" Type="string" Default="null">
        Defines the display format of the time.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TimeAs24hr" Type="bool" Default="false">
        Displays time picker in 24 hour mode without AM/PM selection when enabled.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Inline" Type="bool" Default="false">
        Display the time menu in an always-open state with the inline option.
    </DocsAttributesItem>
    <DocsAttributesItem Name="StaticPicker" Type="bool" Default="true">
        If enabled, the time menu will be positioned as static.
    </DocsAttributesItem>
</DocsAttributes>